<template>
  <div class="layout-design-typography flex flex-col">
    <div class="layout-design-typography__header">
      <slot name="header"> {{title}}</slot>
    </div>
    <div class="layout-design-typography__content flex">
      <span :class="['layout-design-typography__content-block inline-flex cursor-pointer justify-center items-center',{
      'layout-design-typography__content-block--active':currentValue === item.value,
      'layout-design-typography__content-block--disabled':item.disabled,
    }]"
            v-for="(item,index) in options"
            @click="toggle(item)"
            :key="index">
        <span class="layout-design-typography__content-block__inner  inline-flex justify-center items-center">
          <el-tooltip :open-delay="1000"
                      :content="item.label">
            <ZIcon :icon="item.icon" />
          </el-tooltip>
        </span>
      </span>
    </div>

  </div>
</template>

<script>
import ZIcon from '@/components/storybook/z-icon'

export default {
  name: 'LayoutDesignTypography',
  components: {
    ZIcon
  },
  props: {
    options: {
      type: Array,
      default: () => ([])
    },
    value: true,
    title: String
  },
  computed: {
    currentValue: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('input', val)
      }
    }
  },
  methods: {
    toggle (item) {
      if (item.disabled) return
      this.currentValue = item.value
    }
  }
}
</script>

<style lang="scss" scoped>
.layout-design-typography {
  &__header {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.9);
  }
  &__content {
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 2px;
    &-block {
      width: 40px;
      height: 40px;
      &__inner {
        width: 36px;
        height: 36px;
      }
      &--active {
        color: #ffffff;
        background: #0043ce;
      }
      &--disabled {
        cursor:not-allowed;
        color: #a2a2a2;
      }
    }
  }
}
</style>
